<!DOCTYPE html>
<html style="height: 100%; font-size: 14px">
    <head>
        <meta charset="utf-8" />
        <meta name="spreadjs culture" content="zh-cn" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" type="text/css" href="https://cdn.grapecity.com.cn/SpreadJS/package-contents/18.1.1/spread-sheets/styles/gc.spread.sheets.excel2013white.css" />
        <link rel="stylesheet" type="text/css" href="https://cdn.grapecity.com.cn/SpreadJS/package-contents/18.1.1/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css" />
        <script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/18.1.1/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
        <script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/18.1.1/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script>
        <script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/18.1.1/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script>
        <script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/18.1.1/spread-sheets-print/dist/gc.spread.sheets.print.min.js" type="text/javascript"></script>
        <script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/18.1.1/spread-sheets-barcode/dist/gc.spread.sheets.barcode.min.js" type="text/javascript"></script>
        <script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/18.1.1/spread-sheets-pdf/dist/gc.spread.sheets.pdf.min.js" type="text/javascript"></script>
        <script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/18.1.1/spread-sheets-pivot-addon/dist/gc.spread.pivot.pivottables.min.js" type="text/javascript"></script>
        <script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/18.1.1/spread-sheets-slicers/dist/gc.spread.sheets.slicers.min.js" type="text/javascript"></script>
        <script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/18.1.1/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js" type="text/javascript"></script>
        <script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/18.1.1/spread-sheets-formula-panel/dist/gc.spread.sheets.formulapanel.min.js" type="text/javascript"></script>
        <script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/18.1.1/spread-sheets-io/dist/gc.spread.sheets.io.min.js" type="text/javascript"></script>
        <script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/18.1.1/spread-sheets-ai-addon/dist/gc.spread.sheets.ai.min.js" type="text/javascript"></script>
        <script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/18.1.1/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js" type="text/javascript"></script>
        <script
            src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/18.1.1/spread-sheets-designer-resources-cn/dist/gc.spread.sheets.designer.resource.cn.min.js"
            type="text/javascript"
        ></script>
        <script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/18.1.1/spread-sheets-designer/dist/gc.spread.sheets.designer.all.min.js" type="text/javascript"></script>

        <script type="text/javascript">

            // 客户端调用
            window.onload = function () {
                const demoHost = document.getElementById("demo-host");
                const designer = new GC.Spread.Sheets.Designer.Designer(demoHost, undefined, undefined, { sheetCount: 4 });
                const spread = designer.getWorkbook();

                fetch("sample.sjs")
                    .then((res) => res.blob())
                    .then((blob) => {
                        spread.open(blob);
                    });

                spread.options.allowDynamicArray = true;
                const httpCallback = async (requestBody) => {
                    requestBody.model = "deepseek-chat";
                    const response = await fetch("https://api.deepseek.com/v1/chat/completions", {
                        mode: "cors",
                        method: "POST",
                        headers: {
                            Authorization: `Bearer ${"你的访问令牌"}`,
                            "Content-Type": "application/json",
                        },
                        body: JSON.stringify(requestBody),
                    });
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    return response;
                };

                spread.injectAI(httpCallback);
            };
        </script>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>

    <body>
        <div class="sample-tutorial">
            <div id="demo-host"></div>
        </div>
    </body>
</html>
